<template>
  <div>
    <van-cell title="搜索历史">
      <div>
        <div v-if="isDeleteshow">
          <span class="alldelete" @click="$emit('delet',[])">全部删除</span>
          <span @click="isDeleteshow = false">完成</span>
        </div>

        <van-icon name="delete" v-else @click="isDeleteshow = true" />
      </div>
    </van-cell>
    <van-cell @click="deleteSearch(item,index)" :title="item" v-for="(item, index) in history" :key="index">
      <van-icon name="close" v-show="isDeleteshow" />
    </van-cell>
  </div>
</template>
<script>
import {setItem} from "../../../utils/localStorag"
export default {
  props: {
    history: {
      type: Array,
      required: true,
    },
  },
  created() {
    
  },
  data(){
      return {
              isDeleteshow: false
    
      }
  },
  methods:{
    //   点击搜索历史记录列表事件
    deleteSearch(item,index){
        // 只有在删除状态下,才可以进行删除
        if (this.isDeleteshow){
            this.history.splice(index,1)
            // 我们还要删除本地存储中的数据
            


        }else {
            console.log(item)
            // 没有在删除状态下,就是点击搜索历史,进行搜索
            this.$emit('searchhistory',item)
            // this.$emit()
        }

    }
  },
   watch:{
       history(){
           setItem('searchhistory',this.history)


       }
          
    }
};
</script>
<style scoped lang="less">
/deep/.van-cell__title {
  text-align: left;
}
.alldelete {
  // max-width: ;
  margin-right: 5px;
}
</style>